<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h2>
        main数据:
        <span id="mainBtn"></span>
    </h2>
    <button id="addBtn">add</button>
    <iframe src="./iframe.html" frameborder="0"></iframe>


    <script>

        /**
         * SharedWorker 是一种特殊类型的 Worker，可以被多个浏览上下文访问，比如多个 windows，iframes 和 workers，但这些浏览上下文必须同源。它们实现于一个不同于普通 worker 的接口，具有不同的全局作用域：SharedWorkerGlobalScope ，但是继承自WorkerGlobalScope
        
        SharedWorker 线程的创建和使用跟 worker 类似，事件和方法也基本一样。
        不同点在于，主线程与 SharedWorker 线程是通过MessagePort建立起链接，数据通讯方法都挂载在SharedWorker.port上。
        值得注意的是，如果你采用 addEventListener 来接收 message 事件，那么在主线程初始化SharedWorker() 后，还要调用 SharedWorker.port.start() 方法来手动开启端口。
        
         * 
         * 由于 SharedWorker 是被多个页面共同使用，那么除了与各个页面之间的数据通讯是独立的，
         * 同一个SharedWorker 线程上下文中的其他资源都是共享的。
         * 基于这一点，很容易实现不同页面之间的数据通讯。
         * **/
        const shareWorker = new SharedWorker('./worker.js');
        const mainBtn = document.getElementById('mainBtn');
        const addBtn = document.getElementById('addBtn');

        addBtn.onclick = function () {
            shareWorker.port.postMessage('add');
        }

        shareWorker.port.onmessage = function (e) {
            mainBtn.innerText = e.data;
        }


    </script>


</body>

</html>